<form class="form-horizontal" novalidate name="forms.lpCartonConfigForm"
      ng-submit="forms.lpCartonConfigForm.$valid && ctrl.saveOrUpdateCartonConfig(forms.lpCartonConfigForm)">
    <div class="form-group">
        <div class="col-md-3">
            <label>Packaging Type</label>
            <itemspec-auto-complete ng-model="itemCartonConfig.packageTypeItemSpecId" tags=['Material'] required/>
        </div>
        <div class="col-md-3">
            <label>Quantity</label>
            <input type="number" name="name" ng-model="itemCartonConfig.qty" class="form-control" placeholder="Qty" required />
        </div>
        <div class="col-md-3">
            <label>Uom</label>
            <ui-select ng-model="itemCartonConfig.unitId"  required>
                <ui-select-match >
                   {{$select.selected.name}}
                </ui-select-match>
                <ui-select-choices repeat="uom.id as uom in units | filter:$select.search">
                    <div>{{uom.name}}</div>
                </ui-select-choices>
            </ui-select>
        </div>
        <div class="col-md-3">
            <label>Is Default</label>
            <md-switch style="margin-top: 0;margin-bottom: 0;" class="md-primary" aria-label="Is Default" ng-model="itemCartonConfig.isDefault"></md-switch>    
        </div>
    </div>
    <div style="text-align:right;"  permission-check="{{'item::itemSpec_write'}}">
        <waitting-btn type="submit" btn-class="btn blue"
                      value="submitLabel" is-loading="loading"></waitting-btn>
        <button ng-click="ctrl.resetCartonConfig()" type="button" class="btn grey">Reset</button>
    </div>
</form>
<div class="portlet light box-shadow-none" ng-show="itemCartonConfigs.length > 0 "
     style="padding-left:0px; padding-right:0px;">
    <div class="portlet-title">
        <div class="caption">
            <span class="caption-subject bold uppercase">Carton Configs</span>
        </div>
    </div>
    <div class="portlet-body">
        <div class="table-scrollable">
            <table class="table table-striped table-bordered table-hover">
                <thead>
                <tr>
                    <th>Packaging Type</th>
                    <th>Quantity</th>
                    <th>Uom</th>
                    <th>Is Defalt</th>
                    <th permission-check="{{'item::itemSpec_write'}}">Action</th>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="cartonConfig in itemCartonConfigs track by $index" ng-class="{'bg-light-green':hightLights[$index]}">
                    <td>{{lpTypeMap[cartonConfig.packageTypeItemSpecId].name}}</td>
                    <td>{{cartonConfig.qty}}</td>
                    <td>{{unitsMap[cartonConfig.unitId].name}}</td>
                    <td>{{cartonConfig.isDefault?'Yes':'No'}}</td>
                    <td  permission-check="{{'item::itemSpec_write'}}"><a ng-click="ctrl.editCartonConfig($index)">Edit</a> | <a ng-click="ctrl.deleteCartonConfig($index)">Delete</a>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
